<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addRoomInfo"
          v-hasPermi="['iot:roomInfo:add']">新增设备信息</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="roomInfoList">
      <el-table-column label="主键" align="center" prop="roomId" width="120" />
      <el-table-column label="房间楼号" align="center" prop="roomPlace" :show-overflow-tooltip="true" width="150" />
      <el-table-column label="房间楼层" align="center" prop="roomFloor" :show-overflow-tooltip="true" width="150" />
      <el-table-column label="房间号" align="center" prop="roomNum" :show-overflow-tooltip="true" width="150" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope" v-if="scope.row.roleId !== 1">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="updateRoomInfo(scope.row)"
              v-hasPermi="['room:roomInfo:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="deleteRoomInfo(scope.row)"
              v-hasPermi="['room:roomInfo:remove']"
            >删除</el-button>
          </template>
      </el-table-column>
    </el-table>
    <!-- 分页栏 -->
    <pagination 
    v-show="total > 0" 
    :total="total" 
    :page.sync="queryParams.pageNum" 
    :limit.sync="queryParams.pageSize"
    @pagination="getList" />
    <!-- 添加、修改表单 -->
    <el-dialog 
    :title="dialogtitle" 
    :visible.sync="dialogVisible">
      <el-form label-position="right" label-width="80px" :model="form" ref="form">
        <el-form-item label="房间楼号" prop="roomPlace">
          <el-input v-model="form.roomPlace"></el-input>
        </el-form-item>
        <el-form-item label="房间楼层" prop="roomPlace">
          <el-input v-model="form.roomFloor"></el-input>
        </el-form-item>
        <el-form-item label="房间号" prop="roomNum">
          <el-input v-model="form.roomNum"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { listRoomInfo, addRoomInfo, updateRoomInfo, delRoomInfo } from "@/api/iot/roomInfo";

export default {
  name: "roomInfo",
  data() {
    return {
      total: 0,
      roomInfoList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      form: {},
      dialogVisible: false,
      dialogtitle: "",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询类型列表 */
    getList() {
      this.loading = true;
      listRoomInfo().then(response => {
        this.roomInfoList = response.rows;
        console.log(this.roomInfoList);
        this.total = response.total;
        this.loading = false;
      }).catch((err) => {
        console.log("roomInfoList", err);
      });
    },
    // 添加按钮
    addRoomInfo() {
      this.dialogtitle = "添加房间信息";
      this.form = {};
      this.dialogVisible = true;
    },
    //修改按钮
    updateRoomInfo(row) {
      this.dialogtitle = "修改房间信息";
      this.form = row;
      this.dialogVisible = true;
    },
    // 提交表单
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.roomId) {
            updateRoomInfo(this.form)
              .then((res) => {
                console.log('submitedit!', res);
              })
              .catch((err) => {
                console.log('submitedit!', err);
              });
            this.dialogVisible = false
          } else {
            listRoomInfo(this.form).then(response => {
              if(response.rows.length>0){
                this.$modal.msgWarning("不能添加重复数据");
              }else{
              addRoomInfo(this.form)
                .then((res) => {
                  console.log('submitadd!', res);
                })
                .catch((err) => {
                  console.log('submitadd!', err);
                });
              }
            });
          }
          this.dialogVisible = false;
          this.getList();
        } else {
          console.log("error form submit");
          return false;
        }
      });
    },
      /** 删除按钮操作 */
      deleteRoomInfo(row) {
        const ids = row.roomId || this.ids;
        this.$modal.confirm('是否确认删除编号为"' + ids + '"的数据项？').then(function() {
          return delRoomInfo(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
  },


};
</script>